import React, { useState } from 'react';

import { connect } from 'umi'
import { Col, Row, Card, Button, Drawer, Divider, Popconfirm, message, Form, Input, Checkbox, Select } from 'antd';

import Headbox from '@/components/pageHeaderBox'
import styles from './user.less';


const User = (props) => {
    const { route } = props
    const [drawer, setvis] = useState(false)

    return (
        <div>
            <Headbox title={route.title} extra={[<Button key="1" type="primary" onClick={() => setvis(true)}>添加操作员</Button>]} />
            <div className={styles.basicBox}>
                <Row gutter={16}>
                    <Col span={8} style={{ marginBottom: "20px" }}>
                        <Card title="admin" extra={
                            <div>
                                <Popconfirm
                                    title="是否要禁用该账号?"
                                    onConfirm={() => console.log('Confirm')}
                                    onCancel={() => console.log('Cancel')}
                                    okText="确定"
                                    cancelText="取消"
                                >
                                    <a href="#">禁用</a>
                                </Popconfirm>
                                <Divider type="vertical" />
                                <Popconfirm
                                    title="是否要删除该账号?"
                                    onConfirm={() => console.log('Confirm')}
                                    onCancel={() => console.log('Cancel')}
                                    okText="确定"
                                    cancelText="取消"
                                >
                                    <a href="#">删除</a>
                                </Popconfirm>
                                <Divider type="vertical" />
                                <a href="#">编辑</a>
                            </div>}>
                            状态：正常 <Divider type="vertical" /> 权限：超级管理员
                        </Card>
                    </Col>
                    <Col span={8} style={{ marginBottom: "20px" }}>
                        <Card title="001" extra={<a href="#">编辑</a>}>
                            状态：正常 <Divider type="vertical" /> 权限：操作人员
                        </Card>
                    </Col>
                </Row>
            </div>
            <Drawer
                title="添加操作人员"
                placement="right"
                visible={drawer}
                getContainer={false}
                closable
                onClose={() => setvis(false)}
                width={300}
            >
                <div>
                    <Form
                        initialValues={{ remember: true }}
                        onFinish={() => { }}
                        onFinishFailed={() => { }}
                    >
                        <Form.Item
                            label="账号"
                            name="username"
                            rules={[{ required: true, message: '请输入操作人员账号!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: '请输入密码!' }]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item label="启用账号" name="remember" valuePropName="checked">
                            <Checkbox>正常启用</Checkbox>
                        </Form.Item>

                        <Form.Item label="账号权限">
                            <Select defaultValue="操作人员" style={{ width: 120 }} >
                                <Select.Option value="操作人员">操作人员</Select.Option>
                                <Select.Option value="管理员">管理员</Select.Option>
                            </Select>
                        </Form.Item>

                        <Form.Item >
                            <Button type="primary" htmlType="submit">
                                添加
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </Drawer>
        </div>
    )
}

export default connect(({ global }) => ({
    global,
}))(User);